<template>
  <div>
    <div class="mt-portal-head">
      <div class="search-righttop" @click="gotosearchurl()">
        <img src="../../static/portal-img/search.png" />
      </div>
      <div class="nav-box">
        <span v-if="DataLoading" class="loadingnav"><spinner type="ios-small"></spinner>加载中...</span>
        <div v-if="!DataLoading" class="nav-box-item">
          <router-link :to="{name:'index'}" 
          :class="{'active': currentCategoriesId === 0}"
          @click.native="changeActiveNav(0)">推荐</router-link>
        </div>
        <div v-if="!DataLoading" class="nav-box-item" v-for="(data) in nav" :key="data.id">
          <router-link :to="{name:'portalList', params: {catid: data.catid}}" 
          :class="{'active': currentCategoriesId === data.catid}"
          @click.native="changeActiveNav(data.catid)">{{ data.catname }}</router-link>
        </div>
      </div>
    </div>
    <scroller 
    @loadEvent="getList" 
    ref="scroller" 
    style="top: 45px;bottom: 53px;"
    @onScrollStart="onScrollStart"
    @onScrollEnd="onScrollEnd">
      <swiper v-if="currentCategoriesId===0" loop :auto="swiperAutoSwitcher" :list="banners" :show-desc-mask="false" :interval="5000" ></swiper>
      <div>
        <a class="txf-list-box" v-for="item in list" :href="item.url" :key="item.id">
          <div class="txf-list-box-hd" :style="{backgroundImage: 'url(' + item.pic + ')'}"></div>
          <div class="txf-list-box-bd">
            <h4 class="txf-list-box-bd_title">{{ item.title }}</h4>
            <ul class="txf-list-box-bd_info">
              <li>{{ item.catname }}</li>
              <li>{{ item.addtime }}</li>
              <li>{{ item.viewnum }}阅读</li>
            </ul>
          </div>
        </a>
      </div>
    </scroller>
    <service></service>
  </div>
</template>

<script>
import Head from "@/components/Head"
import Service from "@/components/Service"
import Scroller from "@/components/Scroller"
import { Swiper, Spinner } from "vux"

const getList = params =>
  _axios.get("api/portal/home/recommends", {
    params: params
  })

const getBanner = () => _axios.get("api/portal/home/banners")

const getCategories = () => _axios.get("api/portal/home/categories")

export default {
  components: {
    Head,
    Service,
    Swiper,
    Scroller,
    Spinner,
  },
  data() {
    return {
      banners: [
        {
          url: [],
          img: []
        }
      ],
      DataLoading: true,
      DataLoading_banner: true,
      list: [],
      page: 1,
      pageSize: 10,
      status: {
        pullupStatus: "default",
        pulldownStatus: "default"
      },
      toStatus: false,
      nav: [],
      currentCategoriesId: 0, //标识所选为推荐
      swiperAutoSwitcher: true
    }
  },
  mounted() {
    this.getCategoryId()
    this.getBanner()
    this.getCategories()
    setTimeout(()=>{
      this.swiperAutoSwitcher = false
    },2000)
    setTimeout(()=>{
      this.swiperAutoSwitcher = true
    },5000)
  },
  methods: {
    getCategoryId() {
      if (this.$route.name === "index") {
        this.currentCategoriesId = 0
      } else {
        this.currentCategoriesId = Number(this.$route.params.catid)
      }
    },
    async getCategories() {
      let res = await getCategories()
      this.nav = res.data.resp_data
      this.DataLoading = false
    },
    gotosearchurl() {
      window.location.href = "http://search.tongwei.cn/"
    },
    async getBanner() {
      let res
      res = await getBanner()
      this.banners = res.data.resp_data.map(v => {
        return {
          url: v.url,
          img: v.pic
        }
      })
      this.DataLoading_banner = false
      return
    },
    async getList({ loaded, nodata }) {
      let res
      try {
        let params = { page: this.page, page_size: this.pageSize }
        if (this.currentCategoriesId) {
          params = Object.assign({}, params, {
            category: this.currentCategoriesId
          })
        }
        res = await getList(params)
      } catch (e) {
        throw new Error(e)
      }
      if (res.data.resp_data.length) {
        this.list = this.list.concat(res.data.resp_data)
        if (res.data.resp_data.length === this.pageSize) {
          loaded()
        } else {
          nodata()
        }
        this.page++
      } else {
        nodata()
      }
      return
    },
    changeActiveNav(index) {
      this.currentCategoriesId = index
      this.page = 1
      this.list = []
      this.$refs.scroller.load("force")
    },
    onScrollStart() {
      this.swiperAutoSwitcher = false
    },
    onScrollEnd() {
      this.swiperAutoSwitcher = true
    }
  },
  watch: {}
}
</script>

<style>
@import url("../../styles/common/portal/index.css");
.weui-tabbar {
  display: flex !important;
}
.mt-portal-head {
  position: fixed;
  top: 0;
  bottom: 45px;
  left: 0;
  right: 0;
  height: 45px;
}
.nav-box {
  background-color: #f9f9f9;
  height: 45px;
  width: 100%;
  white-space: nowrap;
  overflow-x: scroll;
}
.nav-box-item {
  display: inline-block;
  line-height: 36px;
  width: auto;
  text-align: center;
  font-size: 16px;
  padding: 5px 15px;
}
.nav-box-item .active {
  color: #008cf0 !important;
}
.nav-box-item:last-child {
  padding-right: 80px;
}
.search-righttop {
  width: 45px;
  height: 45px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 4;
  background-color: #f9f9f9;
}
.search-righttop img {
  width: 27px;
  margin: 9px;
}
</style>